<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dragdemo">
    <ul>
        <div class="trs" draggable="true">列表1</div>
        <div class="trs" draggable="true">列表2</div>
        <div class="trs" draggable="true">列表3</div>
        <div class="trs" draggable="true">列表4</div>
        <div class="trs" draggable="true">列表5</div>
    </ul>
    <div draggable="true">Draggable1</div>
    <div draggable="true">Draggable2</div>
    <div draggable="true">Draggable3</div>
    <div draggable="true">Draggable4</div>
</div>
<svg id="svg" width="464" height="320" style="border:solid 1px blue;"  draggable="true">

    <rect id="rect1" x="20" y="20" width="45" height="45"  draggable="true"
          style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>


</svg>

<button onclick="g_wasm.greet('a')">WebAssembly greet</button>
<script>
    let listText =""
    // 第一步：获取DOM节点 (这里我使用的时间冒泡，就不用给单独给每个div绑定事件了)
       var ul = document.querySelector('#dragdemo')
    //第二步：添加dragstart事件 (这里是拖拽前触发的时间，不要使用preventDefault阻止默认时间)
        ul.addEventListener('dragstart',function(event){
            event.dataTransfer.setData('drag_text',event.target.innerHTML)  //1.设置拖拽元素的DOM
        })
    // 第三步：添加dragover事件 (这个事件是必须添加的，不添加这个dragover事件，drop事件触发不了)
        ul.addEventListener('dragover',function(event){
            event.preventDefault() // ****************************必须声明的事件*****************************8
        })

    // 第四步：添加drop拖拽完成事件 (主要是监听完成拖拽的事件)
        ul.addEventListener('drop',function(event){
            event.preventDefault()
            listText =event.target.innerHTML  //3.获取到目标元素的DOM
            const drag_text =event.dataTransfer.getData('drag_text') //2.获取到拖拽元素的DOM
            event.target.innerHTML=drag_text  //4.将目标元素更改为拖拽元素
        })
        ul.addEventListener('dragend',function(event){
            event.preventDefault()
            event.target.innerHTML=listText

        })

   </script>

<script>

    var cardList = [
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250}
    ];

    //

    var usedPlaceList = [[{},{}],[]]


</script>
<script>
    var makeup = mull;
</script>
<script type="module">
     import * as iMakeup  from "/static/makeup/makeup.js";

      makeup=iMakeup
</script>
</body>
</html>